<template>
  <div class="base-index-page">
    <div class="content-wrapper">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <div class="header-title">
            <h1>基地上市预告</h1>
            <p>展示各大种植基地的产品上市信息,帮助您提前了解和规划采购。</p>
          </div>
          <div class="search-bar">
            <el-input
              v-model="searchForm.keywords"
              placeholder="搜索基地名称、地区或产品..."
              clearable
              @input="handleSearch"
              @keyup.enter="handleSearch"
              class="search-input"
            />
            <div class="search-info">
              <span>当前展示{{ total }}个基地</span>
              <el-button type="danger" @click="handleSearch" class="search-btn">搜索</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 基地列表 -->
      <div class="list-section">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="5" animated />
        </div>

        <!-- 详情加载状态 -->
        <div v-else-if="loadingDetails" class="loading-details">
          <el-skeleton :rows="3" animated />
          <p class="loading-text">正在获取基地详情信息...</p>
        </div>

        <!-- 基地列表 -->
        <div v-else-if="baseList.length > 0" class="base-list">
          <div v-for="base in baseList" :key="base.id" class="base-card" @click="viewDetail(base.id)">
            <!-- 左侧：基地相关介绍 + 图片视频 -->
            <div class="base-info-section">
              <!-- 基地标题和上市时间 -->
              <div class="base-header">
                <h3 class="base-title">{{ base.plantationName }}</h3>
                <div v-if="base.marketDate" class="market-date-tag">
                  <!-- <i class="calendar-icon"
                    ></i> -->
                  <el-icon>
                    <Calendar />
                  </el-icon>
                  <span class="market-text">上市: {{ formatMarketDate(base.marketDate) }}</span>
                </div>
              </div>

              <!-- 基地描述 -->
              <p v-if="base.description" class="base-desc">{{ base.description }}</p>

              <!-- 基本信息行（地理位置、种植规模、主要产品、种植设施） -->
              <div class="info-grid">
                <!-- 地理位置 -->
                <div class="info-row">
                  <span class="info-label">地理位置：</span>
                  <span class="info-value">{{ base.location }}</span>
                </div>
                <!-- 主要产品 -->
                <div v-if="base.mainProducts" class="products-section">
                  <span class="section-label">主要产品：</span>
                  <div class="products-list">
                    <span v-for="product in base.mainProducts.split(',')" :key="product.id" class="product-tag">
                      {{ product }}
                    </span>
                  </div>
                </div>
                <!-- 种植规模 -->
                <div v-if="base.plantingScale" class="info-row">
                  <span class="info-label">种植规模：</span>
                  <span class="info-value">{{ base.plantingScale }}</span>
                </div>

                <!-- 种植设施 -->
                <div v-if="base.plantingFacilities" class="info-row">
                  <span class="info-label">种植设施：</span>
                  <span class="info-value">{{ base.plantingFacilities }}</span>
                </div>
              </div>

              <!-- 基地特色 -->
              <div v-if="base.features" class="feature-tags">
                <span class="section-label">基地特色：</span>
                <div class="feature-tag-list">
                  <span v-for="tag in base.features.split(',')" :key="tag" class="feature-tag">
                    {{ tag }}
                  </span>
                </div>
              </div>

              <!-- 基地实景和视频（同一容器，同一行） -->
              <div class="media-container">
                <!-- 基地实景图片（左侧） -->
                <div v-if="base.imageUrl1 || base.imageUrl2" class="base-images">
                  <span class="section-label">基地实景：</span>
                  <div class="images-grid">
                    <div v-if="base.imageUrl1 || base.imageUrl2" class="image-item">
                      <el-image
                        v-if="base.imageUrl1"
                        :src="base.imageUrl1"
                        :alt="`${base.plantationName}实景`"
                        fit="cover"
                        class="scenery-image"
                        :preview-src-list="[base.imageUrl1]"
                      >
                        <template #error>
                          <div class="image-error">
                            <el-icon>
                              <Picture />
                            </el-icon>
                          </div>
                        </template>
                      </el-image>
                      <el-image
                        v-if="base.imageUrl2"
                        :src="base.imageUrl2"
                        :alt="`${base.plantationName}实景`"
                        fit="cover"
                        class="scenery-image"
                        :preview-src-list="[base.imageUrl2]"
                      >
                        <template #error>
                          <div class="image-error">
                            <el-icon>
                              <Picture />
                            </el-icon>
                          </div>
                        </template>
                      </el-image>
                      <!-- <div class="image-title">{{ base.plantationName }}实景</div> -->
                    </div>
                  </div>
                </div>

                <!-- 基地视频（右侧） -->
                <div class="video-section">
                  <span class="section-label">基地视频：</span>
                  <div v-if="base.videoUrl" class="video-container">
                    <video :src="base.videoUrl" controls class="base-video" preload="metadata">
                      您的浏览器不支持视频播放
                    </video>
                  </div>
                  <div v-else class="no-video">
                    <el-icon>
                      <VideoPlay />
                    </el-icon>
                    <span>暂无视频</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧：联系方式及交易二维码 -->
            <div class="base-right-section">
              <!-- 基地交易码 -->
              <div v-if="base.qrCodeUrl" class="qr-code-section">
                <h4>基地交易码</h4>
                <div class="qr-code">
                  <el-image
                    :src="getImageUrl(base.qrCodeUrl)"
                    :alt="'基地交易码: ' + base.transactionCode"
                    fit="contain"
                    class="qr-image"
                  >
                    <template #error>
                      <div class="qr-error">
                        <el-icon>
                          <Grid />
                        </el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
                <p class="transaction-code">交易码: {{ base.transactionCode }}</p>
              </div>

              <!-- 联系方式 -->
              <div class="contact-section">
                <h4>联系方式</h4>
                <div class="contact-info">
                  <div v-if="base.contactPerson" class="contact-item">
                    <div class="contact-label">联系人：</div>
                    <div class="contact-value">{{ base.contactPerson }}</div>
                  </div>
                  <div v-if="base.contactPhone" class="contact-item">
                    <div class="contact-label">电话：</div>
                    <div class="contact-value">{{ base.contactPhone }}</div>
                  </div>
                  <div v-if="base.contactEmail" class="contact-item">
                    <div class="contact-label">邮箱：</div>
                    <div class="contact-value">{{ base.contactEmail }}</div>
                  </div>
                </div>
                <el-button type="primary" class="reserve-btn" @click.stop="openReservationDialog(base)">
                  预约考察
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else class="empty-state">
          <el-empty description="暂无基地数据" />
        </div>

        <!-- 分页 -->
        <div v-if="total > 0" class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 基地详情弹窗 -->
      <el-dialog v-model="detailVisible" title="基地详情" width="600px" :before-close="handleCloseDetail">
        <div v-if="baseDetail" class="base-detail">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="基地名称">
              {{ baseDetail.plantationName }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="baseDetail.status ? 'success' : 'danger'">
                {{ baseDetail.status ? '正常' : '停用' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">
              {{ baseDetail.location }}
            </el-descriptions-item>
            <el-descriptions-item v-if="baseDetail.description" label="描述" :span="2">
              {{ baseDetail.description }}
            </el-descriptions-item>
            <el-descriptions-item v-if="baseDetail.contactPerson" label="联系人">
              {{ baseDetail.contactPerson }}
            </el-descriptions-item>
            <el-descriptions-item v-if="baseDetail.contactPhone" label="电话">
              {{ baseDetail.contactPhone }}
            </el-descriptions-item>
            <el-descriptions-item v-if="baseDetail.contactEmail" label="邮箱">
              {{ baseDetail.contactEmail }}
            </el-descriptions-item>
            <el-descriptions-item label="种植规模">
              {{ baseDetail.plantingScale }}
            </el-descriptions-item>
            <el-descriptions-item label="种植设施">
              {{ baseDetail.plantingFacilities }}
            </el-descriptions-item>
            <el-descriptions-item label="交易码">
              {{ baseDetail.transactionCode }}
            </el-descriptions-item>
            <el-descriptions-item label="上市时间">
              {{ formatDate(baseDetail.marketDate) }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ formatDate(baseDetail.createTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ formatDate(baseDetail.updateTime) }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-dialog>

      <!-- 预约考察弹窗 -->
      <el-dialog
        v-model="reservationDialogVisible"
        width="600px"
        :close-on-click-modal="false"
        :center="true"
        :align-center="true"
        class="reservation-dialog"
      >
        <template #header>
          <div class="dialog-header">
            <div class="header-top">
              <div class="dialog-title">
                <el-icon class="title-icon">
                  <Calendar />
                </el-icon>
                <span>预约考察</span>
              </div>
              <div class="close-button" @click="closeReservationDialog">
                <el-icon>
                  <Close />
                </el-icon>
              </div>
            </div>
          </div>
        </template>

        <el-form
          :model="reservationForm"
          label-width="100px"
          :rules="reservationFormRules"
          ref="reservationFormRef"
          class="reservation-form"
        >
          <el-form-item label="基地名称">
            <el-input :value="currentBase?.plantationName" disabled class="disabled-input" />
          </el-form-item>

          <el-form-item label="考察天数" prop="inspectionDays">
            <el-input
              v-model="reservationForm.inspectionDays"
              placeholder="请输入考察天数"
              type="number"
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="单位名称" prop="unitName">
            <el-input
              v-model="reservationForm.unitName"
              placeholder="请输入单位名称"
              maxlength="50"
              show-word-limit
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="考察目的" prop="purpose">
            <el-select v-model="reservationForm.purpose" placeholder="请选择考察目的" class="full-width">
              <el-option label="订货" value="订货" />
              <el-option label="合作洽谈" value="合作洽谈" />
              <el-option label="技术交流" value="技术交流" />
              <el-option label="实地调研" value="实地调研" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>

          <el-form-item label="参与人数" prop="participantCount">
            <el-input-number
              v-model="reservationForm.participantCount"
              :min="1"
              :max="50"
              placeholder="请输入参与人数"
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="联系电话" prop="contactPhone">
            <el-input
              v-model="reservationForm.contactPhone"
              placeholder="请输入联系电话"
              maxlength="20"
              show-word-limit
              class="full-width"
            />
          </el-form-item>

          <el-form-item label="备注信息" prop="remarks">
            <el-input
              v-model="reservationForm.remarks"
              type="textarea"
              placeholder="请输入备注信息（可选）"
              :rows="3"
              maxlength="200"
              show-word-limit
              class="full-width"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeReservationDialog">取消</el-button>
            <el-button type="primary" :loading="submitting" @click="submitReservation">
              {{ submitting ? '提交中...' : '确认预约' }}
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useBase } from '~/composables/useBase'
import { ElMessage } from 'element-plus'
import { Picture, Grid, VideoPlay, Calendar, Close } from '@element-plus/icons-vue'
import type { BaseDetailResponse, PlantationAppointmentSaveBody } from '~/server/baseApi'
import { savePlantationAppointmentApi } from '~/server/baseApi'
import { useUserStore } from '~/stores/user'

// 使用基地管理组合式函数
const {
  loading,
  loadingDetails,
  baseList,
  total,
  currentPage,
  pageSize,
  fetchBaseList,
  fetchBaseDetail,
  refreshBaseList,
  handlePageChange,
} = useBase()

// 用户信息（用于 uid 和预填联系电话）
const userStore = useUserStore()

// 搜索表单
const searchForm = reactive({
  keywords: '',
  status: undefined as number | undefined,
})

// 详情弹窗
const detailVisible = ref(false)
const baseDetail = ref<BaseDetailResponse | null>(null)

// 预约考察弹窗
const reservationDialogVisible = ref(false)
const currentBase = ref<any>(null)
const submitting = ref(false)
const reservationFormRef = ref()

// 预约表单
const reservationForm = reactive({
  inspectionDays: '',
  unitName: '',
  purpose: '',
  participantCount: 1,
  contactPhone: '',
  remarks: '',
})

// 表单验证规则
const optionalPhoneValidator = (_rule: any, value: string, callback: any) => {
  if (!value) return callback(new Error('请输入联系电话'))
  const mobile = /^1[3-9]\d{9}$/
  const landline = /^(\d{3,4}-)?\d{7,8}$/
  const intl = /^\+?\d{6,20}$/
  if (mobile.test(value) || landline.test(value) || intl.test(value)) return callback()
  callback(new Error('请输入有效的手机或座机号码'))
}
const reservationFormRules = {
  inspectionDays: [
    { required: true, message: '请输入考察天数', trigger: 'blur' },
    { pattern: /^\d+$/, message: '请输入有效的天数', trigger: 'blur' },
  ],
  unitName: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
  purpose: [{ required: true, message: '请选择考察目的', trigger: 'change' }],
  participantCount: [
    { required: true, message: '请输入参与人数', trigger: 'blur' },
    { pattern: /^\d+$/, message: '请输入有效的人数', trigger: 'blur' },
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { validator: optionalPhoneValidator, trigger: 'blur' },
  ],
}

// 搜索处理
const handleSearch = async () => {
  currentPage.value = 1
  await loadBaseList()
}

// 重置搜索
const handleReset = () => {
  searchForm.keywords = ''
  searchForm.status = undefined
  currentPage.value = 1
  loadBaseList()
}

// 加载基地列表
const loadBaseList = async () => {
  try {
    await fetchBaseList({
      ...searchForm,
      page: currentPage.value,
      limit: pageSize.value,
    })
  } catch (error) {
    // 检查是否是认证错误
    const errorMessage = error?.toString() || ''
    if (errorMessage.includes('401') || errorMessage.includes('402') || errorMessage.includes('登录')) {
      ElMessage.warning('请先登录后再查看基地信息')
    } else {
      ElMessage.error('加载基地列表失败，请稍后重试')
    }
  }
}

// 刷新列表
const refreshList = () => {
  loadBaseList()
}

// 查看详情
const viewDetail = async (id: number) => {
  return
  try {
    const data = await fetchBaseDetail(id)
    baseDetail.value = data
    detailVisible.value = true
  } catch (error) {
    ElMessage.error('加载基地详情失败')
  }
}

// 关闭详情弹窗
const handleCloseDetail = () => {
  detailVisible.value = false
  baseDetail.value = null
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadBaseList()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadBaseList()
}

// 预约考察弹窗相关函数
const openReservationDialog = (base: any) => {
  currentBase.value = base
  reservationDialogVisible.value = true
  // 重置并预填表单
  Object.assign(reservationForm, {
    inspectionDays: '',
    unitName: '',
    purpose: '',
    participantCount: 1,
    contactPhone: userStore?.userInfos?.phone || '',
    remarks: '',
  })
}

const closeReservationDialog = () => {
  reservationDialogVisible.value = false
  currentBase.value = null
  // 重置表单
  if (reservationFormRef.value) {
    reservationFormRef.value.resetFields()
  }
}

const submitReservation = async () => {
  if (!reservationFormRef.value) return

  try {
    // 表单校验
    await reservationFormRef.value.validate()

    submitting.value = true

    // 构造后端所需入参
    const uid = Number((userStore?.userInfos && (userStore.userInfos.id || userStore.userInfos.userId)) || 0)
    const payload: PlantationAppointmentSaveBody = {
      plantationId: Number(currentBase.value?.id || 0),
      uid,
      inspectionDays: Number(reservationForm.inspectionDays),
      companyName: reservationForm.unitName,
      purpose: reservationForm.purpose,
      numOfPeople: Number(reservationForm.participantCount),
      contactPhone: reservationForm.contactPhone || '',
    }

    // 调用保存接口
    await savePlantationAppointmentApi(payload)

    ElMessage.success('预约考察成功！我们会尽快与您联系。')
    closeReservationDialog()
  } catch (error) {
    console.error('提交预约失败:', error)
    ElMessage.error(error?.message || '提交预约失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 格式化日期
const formatDate = (date: string) => {
  return new Date(date).toLocaleString('zh-CN')
}

// 格式化上市时间（只显示月日）
const formatMarketDate = (date: string) => {
  const marketDate = new Date(date)
  const month = marketDate.getMonth() + 1
  const day = marketDate.getDate()
  return `${month}月${day}日`
}

// 获取完整的图片URL
const getImageUrl = (imagePath: string | undefined | null) => {
  console.log('getImageUrl', imagePath)
  if (!imagePath || typeof imagePath !== 'string') return ''
  // 如果已经是完整URL，直接返回
  if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
    return imagePath
  }
  // 从环境变量获取API基础URL
  const config = useRuntimeConfig()
  const apiUrl = config.public.apiBase || 'http://192.168.1.141:8081' // Fallback
  return `${apiUrl}${imagePath}`
}

// 页面加载时获取数据
onMounted(() => {
  loadBaseList()
})
</script>

<style scoped lang="scss">
.base-index-page {
  background-color: #ffffff;
  padding: 40px 0;
  margin: 20px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100vh;

  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

.page-header {
  background: #fff;
  padding: 20px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;

  .header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .header-title {
    text-align: center;
    margin-bottom: 15px;

    h1 {
      margin: 0 0 8px 0;
      color: #333;
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 1px;
    }

    p {
      margin: 0;
      color: #666;
      font-size: 16px;
      line-height: 1.6;
    }
  }

  .search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;

    .search-input {
      flex: 1;
      max-width: 500px;

      :deep(.el-input__wrapper) {
        border-radius: 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e4e7ed;
        padding: 12px 20px;
        font-size: 14px;

        &:hover {
          border-color: #d9d9d9;
        }

        &.is-focus {
          border-color: #d9d9d9;
          box-shadow: 0 0 0 2px rgba(217, 217, 217, 0.2);
        }
      }
    }

    .search-info {
      display: flex;
      align-items: center;
      gap: 15px;

      span {
        color: #666;
        font-size: 14px;
        white-space: nowrap;
      }

      .search-btn {
        border-radius: 25px;
        padding: 12px 30px;
        font-weight: 500;
        font-size: 14px;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
        border: none;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
        }
      }
    }
  }
}

.list-section {
  .loading-container {
    padding: 40px;
  }

  .loading-details {
    padding: 40px;
    text-align: center;

    .loading-text {
      margin-top: 20px;
      color: #666;
      font-size: 14px;
    }
  }

  .base-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .base-card {
    background: white;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    min-height: 400px;
    position: relative;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    // 左侧：基地相关介绍 + 图片视频
    .base-info-section {
      flex: 1;
      padding: 20px;
      border-right: 1px solid #e4e7ed;

      .base-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 15px;

        .base-title {
          margin: 0;
          color: #333;
          font-size: 20px;
          font-weight: 600;
          flex: 1;
        }

        .market-date-tag {
          display: flex;
          align-items: center;
          background-color: #fdedeb;
          color: #e65d6e;
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 500;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

          .calendar-icon {
            width: 12px;
            height: 12px;
            position: relative;
            display: inline-block;
            margin-right: 4px;

            &::before {
              content: '';
              position: absolute;
              top: 1px;
              left: 0;
              width: 12px;
              height: 9px;
              border: 1.5px solid #e65d6e;
              border-radius: 3px;
              background: #fdedeb;
            }

            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 1.5px;
              width: 9px;
              height: 3px;
              background: #e65d6e;
              border-radius: 1.5px;
            }
          }

          .market-text {
            font-size: 12px;
            font-weight: 500;
          }
        }
      }

      .base-desc {
        color: #666;
        font-size: 14px;
        margin: 0 0 15px 0;
        line-height: 1.5;
      }

      .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 15px;
      }

      .info-row {
        font-size: 14px;
        color: #666;
        display: flex;
        flex-direction: column;

        .info-label {
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
          font-size: 12px;
        }

        .info-value {
          color: #666;
          font-size: 14px;
        }
      }

      .feature-tags {
        margin-bottom: 15px;

        .section-label {
          font-size: 14px;
          color: #333;
          font-weight: 500;
          margin-right: 8px;
        }

        .feature-tag-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 8px;
        }

        .feature-tag {
          display: inline-block;
          padding: 4px 12px;
          background-color: #e6f7ff;
          color: #1890ff;
          border: 1px solid #91d5ff;
          border-radius: 16px;
          font-size: 12px;
          font-weight: 400;
          line-height: 1.4;
        }
      }

      .products-section {
        .section-label {
          font-size: 14px;
          color: #333;
          font-weight: 500;
          margin-right: 8px;
          display: block;
          margin-bottom: 8px;
        }

        .products-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .product-tag {
          display: inline-block;
          padding: 4px 12px;
          background-color: #198754;
          color: #fff;
          background-color: #198754;
          border: 1px solid;
          border-radius: 16px;
          font-size: 12px;
          font-weight: 400;
          line-height: 1.4;
        }
      }
    }

    .media-container {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;

      .base-images,
      .video-section {
        flex: 1;
        margin-bottom: 0;

        .section-label {
          font-size: 14px;
          color: #333;
          font-weight: 500;
          margin-bottom: 10px;
          display: block;
        }
      }
    }

    .base-images,
    .video-section {
      margin-bottom: 20px;

      .section-label {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-bottom: 10px;
        display: block;
      }

      .images-grid {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .image-item {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: none;

        .scenery-image {
          width: calc(50% - 4px);
          height: 150px;
          border-radius: 8px;
          border: 1px solid #e4e7ed;
        }

        // 单图场景占满一行
        .scenery-image:only-child {
          width: 100%;
        }

        .image-title {
          font-size: 12px;
          color: #666;
          text-align: center;
          margin-top: 5px;
        }

        .image-error {
          width: 100%;
          height: 150px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f5f5f5;
          border: 1px solid #e4e7ed;
          border-radius: 8px;
          color: #999;

          .el-icon {
            font-size: 24px;
          }
        }
      }

      .video-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .base-video {
        width: 100%;
        height: 150px;
        border-radius: 8px;
        background: #000;
      }

      .no-video {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 150px;
        background: #f5f5f5;
        border-radius: 8px;
        color: #999;

        .el-icon {
          font-size: 32px;
          margin-bottom: 8px;
        }

        span {
          font-size: 12px;
        }
      }
    }

    // 右侧：联系方式及交易二维码
    .base-right-section {
      width: 300px;
      padding: 20px;
      background: #fafafa;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .qr-code-section {
        text-align: center;

        h4 {
          margin: 0 0 10px 0;
          color: #333;
          font-size: 16px;
          font-weight: 500;
        }

        .qr-code {
          margin-bottom: 10px;

          .qr-image {
            width: 120px;
            height: 120px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
          }

          .qr-error {
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            color: #999;
            margin: 0 auto;

            .el-icon {
              font-size: 48px;
            }
          }

          .transaction-code {
            margin: 0;
            color: #666;
            font-size: 12px;
          }
        }
      }

      .contact-section {
        h4 {
          margin: 0 0 15px 0;
          color: #333;
          font-size: 16px;
          font-weight: 500;
        }

        .contact-info {
          margin-bottom: 15px;

          .contact-item {
            margin-bottom: 12px;
            font-size: 14px;

            .contact-label {
              color: #666;
              font-size: 12px;
              font-weight: 500;
              margin-bottom: 4px;
            }

            .contact-value {
              color: #333;
              font-size: 14px;
            }
          }
        }

        .reserve-btn {
          width: 100%;
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 40px;
  }

  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}

.base-detail {
  .el-descriptions {
    margin-top: 20px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .base-list {
    grid-template-columns: 1fr;
  }

  .search-section .el-form {
    flex-direction: column;
    gap: 15px;
  }
}

// 预约考察弹窗样式
:deep(.reservation-dialog) {
  .el-dialog {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 0;
    border-bottom: none;
    margin: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }

  .el-dialog__body {
    padding: 30px;
    margin: 0;
  }

  .el-dialog__footer {
    padding: 20px 30px 30px;
    border-top: 1px solid #f0f0f0;
    margin: 0;
  }

  // 隐藏默认的关闭按钮
  .el-dialog__headerbtn {
    display: none;
  }
}

.dialog-header {
  background: #fff;
  border-radius: 12px 12px 0 0;
  position: relative;

  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 15px;
    background: linear-gradient(135deg, #e93323 0%, #ff6b35 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    overflow: hidden;

    .dialog-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 600;

      .title-icon {
        margin-right: 8px;
        font-size: 22px;
      }
    }

    .close-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
      }

      .el-icon {
        font-size: 16px;
        color: white;
      }
    }
  }

  .base-title {
    padding: 15px 30px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    line-height: 1.4;
    word-break: break-all;
    background: #fff;
  }
}

.reservation-form {
  width: 100%;

  .el-form-item {
    margin-bottom: 24px;
    width: 100%;

    .el-form-item__label {
      font-weight: 500;
      color: #333;
      width: 100px !important;
      flex-shrink: 0;
    }

    .el-form-item__content {
      flex: 1;
      margin-left: 0 !important;

      .full-width {
        width: 100%;
      }

      .disabled-input {
        :deep(.el-input__inner) {
          background-color: #f5f7fa;
          color: #909399;
          cursor: not-allowed;
        }
      }

      .el-input {
        :deep(.el-input__wrapper) {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;

          &:focus-within {
            border-color: #e93323;
            box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
          }
        }
      }

      .el-select {
        width: 100%;

        :deep(.el-select__wrapper) {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;

          &:focus-within {
            border-color: #e93323;
            box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
          }
        }
      }

      .el-textarea {
        :deep(.el-textarea__inner) {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;

          &:focus {
            border-color: #e93323;
            box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
          }
        }
      }

      .el-input-number {
        width: 100%;

        :deep(.el-input__wrapper) {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;

          &:focus-within {
            border-color: #e93323;
            box-shadow: 0 0 0 2px rgba(233, 51, 35, 0.1);
          }
        }
      }
    }
  }
}

.dialog-footer {
  text-align: center;

  .el-button {
    min-width: 100px;
    margin: 0 10px;
    border-radius: 6px;
    font-weight: 500;

    &.el-button--primary {
      background: linear-gradient(135deg, #e93323 0%, #ff6b35 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #d42a1a 0%, #e55a2b 100%);
      }
    }
  }
}
</style>
